<template>
  <view class="swiper-tab">
      <swiper class="mainTabSwiper" indicator-dots="{{false}}" display-multiple-items="5" current="{{mainSwCur}}">
          <block>
              <swiper-item wx:for="{{tabList}}" wx:key="index,item">
                  <view class="swiperView {{ curMain == index ?'active' : ''}}" @tap="clickSwFun" data-choose="{{index}}">
                      <view class="nav_text">{{item}}</view>
                  </view>
              </swiper-item>
          </block>
      </swiper>
  </view>
</template>
<script>
import wepy from 'wepy'

export default class Filter extends wepy.component {
    props = {
        tabList: {
            type: Object
        }
    }
    data = {
        curMain : 0,
        mainSwCur: 0
    }
    methods = {
        changeTab(r) {
            const t = this;
            t.curMain = r;
            t.$apply();
        },
        clickSwFun(e){
            const t = this;
            let l = t.tabList.length - 2;
            t.curMain = parseInt(e.currentTarget.dataset.choose);
            if(t.curMain <= 2){
                t.mainSwCur = 0;
            }else if(2 < t.curMain && t.curMain < l){
                t.mainSwCur = t.curMain - 2;
            }
            t.$emit("currentTab", t.curMain);
        }
    }
    onLoad(){
        const t = this;
        t.curMain = 0;
        t.mainSwCur = 0;
        t.$apply();
    }
}

</script>
<style lang="less">
    .swiper-tab {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100rpx;
        z-index: 999;
        overflow: hidden;
        background-color: #fff;
        .mainTabSwiper {
            border-top: 1px solid #e6e6e6;
            border-bottom: 1px solid #e6e6e6;
            height: 90rpx;
            text-align: center;
            line-height: 90rpx;
            .swiper-tab-pd{
                padding: 0;
            }
            .swiperView {
                height: 90rpx;
                position: relative;
            }
            .nav_icon {
                height: 50rpx;
                width: 50rpx;
                display: inline-block;
                vertical-align: middle;
                margin-right: 20rpx;
            }
            .nav_text {
                font-size: 24rpx;
                display: inline-block;
                vertical-align: middle;
            }
            .active .nav_text{
                color: #ffb025;
            }
            .active:before {
                content: '';
                position: absolute;
                left: 0;
                bottom:0;
                width: 100%;
                border-bottom: 3rpx solid #ffb025;
            }
        }
    }
</style>
